/*

write by wuweiwei
www.github.com/flybirdsoft
wwww.cnblogs.com/wsoft
*/

var wPanel = function (options) {
	/*
		optinos.id
		options.visible default false
		options.title
		options.position is {x,y}
		options.onClose 点击关闭按钮的事件处理句柄
	*/
	this.options = options;
	this.initStyle();
	this.createStyle();

	let html = `
				<div class="wPanel-title">
					<label>{title}</label>
					<i class="wPanel-close">✕</i>
				</div>
				<div class="wPanel-content"></div>
				<div class="wPanel-resize"></div>
			`;
	html = html.replace('{title}', this.options.title);
	let node = document.createElement('div');
	node.id = options.id || "wPanel";
	node.style.position = "fixed";
	node.className = "wPanel";
	node.innerHTML = html;
	this.node = node;
	if(!!this.options.position)
	{
		this.node.style.left = this.options.position.x + "px";
		this.node.style.top = this.options.position.y + "px";	  
	}
	this.node.style.display = !!(options.visible) ? "block" : "none";
	document.getElementsByTagName("body")[0].appendChild(this.node);
	this.bindEvent();
}

wPanel.prototype.initStyle = function () {
	let css,switchStyle;
	switchStyle = {
		".wPanel":{
			"left":"20px",
			"top":"20px",
			"min-height":"100px",
			"min-width" :"160px",
			"background":"#eee",
			"border-radius":"5px",
			"position":"fixed",
			"width":"300px",
			"height":"400px",
			"border":"1px solid #CCC",
			"box-shadow":"2px 2px 8px 1px #777"
		},
		".wPanel .wPanel-content":{
			"position":"absolute",
			"top":"40px",
			"bottom":"20px",
			"width":"100%",
			"overflow":"auto"
		},
		".wPanel .wPanel-resize":{
			"position":"absolute",
			"width":"100%",
			"bottom":"0px",
			"border-top":"1px solid #ccc",
			"height":"20px",
			"cursor":"nw-resize"
		},
		".wPanel .wPanel-title":{
			"height":"40px",
			"line-height":"40px",
			"border-bottom":"1px solid #CCC",
			"background":"#CCC",
			"cursor":"move"
		},
		".wPanel .wPanel-title label":{
			"padding-left":"10px",
			"pointer-events":"none"
		},
		".wPanel .wPanel-title i":{
			"font-style":"normal",
			"float":"right",
			"padding-right":"10px",
			"cursor":"pointer"
		}
	};
	css = this.convertStyle(switchStyle);
	this.createStyle(css);
}

wPanel.prototype.convertStyle = function (styleObject) {
	var v, keysArray = [], len, styleObjectString, splitSymbol;
	var iterator;
	splitSymbol = /[\'|\"]/g;
	styleObjectString = JSON.stringify(styleObject);
	len = keysArray.length;
	styleObjectString = styleObjectString.replace(splitSymbol,"");
	styleObjectString = styleObjectString.replace(/\},/g,"}");
	styleObjectString = styleObjectString.replace(/,/g,";");
	styleObjectString = styleObjectString.replace(/:{/g,"{");
	styleObjectString = styleObjectString.substr(1);
	styleObjectString = styleObjectString.substring(0,styleObjectString.length-1);
	return styleObjectString;
}

wPanel.prototype.createStyle = function (styleString) {
	let style, css;
	style = document.createElement('style');
	style.setAttribute('type', 'text/css');
	style.innerHTML = styleString;
	document.getElementsByTagName("head")[0].appendChild(style);
}

wPanel.prototype.bindEvent = function () {
	this.moveEvnet();
}

wPanel.prototype.moveEvnet = function () {
	var th = this;
	this.document = document.getElementsByTagName("body")[0];

	this.node.querySelector(".wPanel-title").onselectstart = function(){
		return false;
	}
	this.node.onclick = function(e){
		let target;
		target = e.target;
		if(target.className=="wPanel-close")/*close panel event*/
		{
			if(!!th.options.onClose)
			{
				if(!!th.options.onClose())
				{
					th.node.style.display = "none";
				}
			}
			else
			{
				th.node.style.display = "none";
			}
			
		}
	}

	this.document.addEventListener("mousedown", (e) => {
		var target = e.target;
		if(target.className=="wPanel-title")
		{
			this.drag = true;
			this.offsetTop = this.node.offsetTop;
			this.offsetLeft = this.node.offsetLeft;
			this.mouseX = e.clientX;
			this.mouseY = e.clientY;
			this.node.style.left = (this.node.offsetLeft+2)+"px";
			this.node.style.top = (this.node.offsetTop+2)+"px";
		}
		if(target.className=="wPanel-resize")
		{
			this.resize = true;
			this.offsetWidth = this.node.offsetWidth;
			this.offsetHeight = this.node.offsetHeight;
			this.mouseX = e.clientX;
			this.mouseY = e.clientY;
		}

	});

	this.document.addEventListener("mouseup", () => {
			this.drag = false;
			this.resize = false;
	});
	
	this.document.addEventListener("mousemove", (e) => {
		if(!!this.drag)
		{
			if(this.node.offsetLeft<=0)
			{
				this.node.style.left = "0px";
				return;
			}
			if(this.node.offsetTop<=0)
			{
				this.node.style.top = "0px";
				return;
			}
			this.node.style.left = this.offsetLeft + (e.clientX - this.mouseX) + "px";
			this.node.style.top = this.offsetTop + (e.clientY - this.mouseY) + "px";
		}
		else if(!!this.resize)
		{
			this.node.style.width = this.offsetWidth + (e.clientX - this.mouseX) + "px";
			this.node.style.height = this.offsetHeight + (e.clientY - this.mouseY) + "px";
		}
	});

}

wPanel.prototype.setData = function (html) {
	var panelContentNode = this.node.querySelector(".wPanel-content");
	panelContentNode.innerHTML = html;
}

wPanel.prototype.setTitle = function (html) {
	var titleNode = this.node.querySelector(".wPanel-title label");
	titleNode.innerHTML = html;
}

wPanel.prototype.show = function () {
	this.node.style.display = "block";
}

wPanel.prototype.hide = function () {
	this.node.style.display = "none";
}

window.wPanel = wPanel;

/*
try
{
    eval("export {wPanel}");
}
catch(e)
{
    window.wPanel = wPanel;
    console.log("not export");
}
*/